<template>
    <div class="newfriends">
        <div class="top">
            <div class="title">新的朋友</div>
        </div>
        <div class="allinfo">
            <div class="info" v-for="(item, index) in newData" :key="index">
                <div class="finfo">
                    <div class="pic"><img :src="item.avatar" alt=""></div>
                    <div class="name">{{ item.username }}</div>
                </div>
                <div class="text" v-if="item.status=='accepted'">已添加</div>
                <div v-else-if="item.status=='pending'" class="btn">
                    <el-button color="#626aef" type="primary" size="default" @click="addnewfriend(item)">添加</el-button>
                </div>
                <div class="text" v-else>已拒绝</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reqAddfriend, reqNewFriends } from '@/api/user';
import { newfriend } from '@/types/type';
//引入用户相关的仓库,获取当前用户的头像、昵称S
import useUserStore from '@/store/modules/user';
import {  onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
//获取存储用户信息的仓库对象
let userStore = useUserStore();
let newData: newfriend[] = reactive([]);
const userId=userStore.userId
onMounted(() => {
    getNewfriendsinfo()
})
// 获取信息
const getNewfriendsinfo = async () => {
    const result = await reqNewFriends(userStore.userId);
    if (result.code == 200) {
        newData.splice(0, newData.length, ...result.data)
    }



}
// 添加新朋友
const addnewfriend=async(friend:any)=>{
   const result=await reqAddfriend({userId,friendId:friend._id})
   if(result.code==200){
    ElMessage({
        type:'success',
        message:result.message
    })
    getNewfriendsinfo()
   }
   
}
</script>

<style scoped lang="scss">
.newfriends {
    .top {
        display: flex;
        width: 100%;
        height: 70px;
        background-color: #f1f1f1;
        border-bottom: 1.5px solid #E0E0E0;
        padding-left: 30px;
        align-items: center;
        /* 垂直居中对齐 */
    }

    .allinfo {
        .info {
            width: 80%;
            margin: 15px 100px;
            padding: 10px 0;
            display: flex;
            border-bottom: 1.5px solid #E0E0E0;
            justify-content: space-between;
            /* 将子元素分散对齐，左右分开 */
            align-items: center;

            /* 垂直居中对齐 */

            .finfo {
                display: flex;

                .pic {
                    width: 50px;
                    height: 50px;
                    // border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }


                }

                .name {
                    padding-top: 10px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #333;
                }
            }

            .text {
                font-size: 14px;
                color: #888;
            }
            .btn{
                color: white;
            }

        }
    }

}
</style>